<script setup>
import { ref, computed, reactive } from "vue";
const isx = ref(false);
const isb = ref(false);
const ism = ref(false);
const Ck = (val) => {
  if (val === "isx") {
    isx.value = !isx.value;
    isb.value = false;
    ism.value = false;
  } else if (val === "ism") {
    isx.value = false;
    isb.value = false;
    ism.value = !ism.value;
  } else if (val === "isb") {
    isx.value = false;
    isb.value = !isb.value;
    ism.value = false;
  }
};
</script>

<template>
  <div class="bigbox">
    <div class="xie">
      <p @click="Ck('isx')">鞋类</p>
      <div v-show="isx" class="content">
        <li>耐克</li>
        <li>匡威</li>
        <li>安踏</li>
        <li>乔丹</li>
        <li>adidas</li>
        <li>李宁</li>
      </div>
    </div>
    <div class="mei">
      <p @click="Ck('ism')">美妆</p>
      <div v-show="ism" class="content">
        <li>珂拉琪</li>
        <li>至本</li>
        <li>百雀羚</li>
        <li>Ukiss</li>
        <li>自然堂</li>
        <li>一叶子</li>
      </div>
    </div>
    <div class="bag">
      <p @click="Ck('isb')">包类</p>
      <div v-show="isb" class="content">
        <li>LV</li>
        <li>爱马仕</li>
        <li>古驰</li>
        <li>香奈儿</li>
        <li>普拉达</li>
        <li>巴黎世家</li>
      </div>
    </div>
  </div>
</template>

<style scoped>
li {
  list-style: none;
  border: solid 5px pink;
  text-align: center;
  padding: 10px 0px 10px 0px;
  color: white;
  cursor: pointer;
}
p {
  font-weight: 900;
  cursor: pointer;
  text-align: center;
}
.content {
  background-color: #dd9ee036;
}
.bigbox {
  display: flex;
  width: 600px;
  justify-content: space-evenly;
  background-color: pink;
  padding-bottom: 20px;
}
.xie,
.mei,
.bag {
  width: 200px;
  color: palevioletred;
}
</style>
